<template>
  <div>
    <div id="app" class="container">
      <!-- 查询条件区域 -->
      <div class="search">
        <el-input
          v-model="searchCondition.nameOrPhone"
          placeholder="客户姓名/联系电话"
          style="width: 50%"
        ></el-input>
        <SelectState v-model="searchCondition.state"></SelectState>
        <SelectUsers v-model="searchCondition.ownerUsername" v-if="this.$store.state.currentUser.role === 'MANAGER'"></SelectUsers>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </div>
      <!-- 数据表格区域 -->
      <el-table :data="searchResult.list" style="width: 100%">
        <el-table-column prop="name" label="客户姓名">
          <template slot-scope="scope">
            <el-link type="primary" @click="openDrawer(scope.row)">
              {{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="ownerUsername" label="负责人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column
          prop="lastFollowUpDate"
          label="最后跟进日期"
        ></el-table-column>
        <el-table-column prop="source" label="客户来源"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="dealDate" label="成交日期"></el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchCondition.page"
        :page-sizes="[5, 10, 15]"
        :page-size.sync="searchCondition.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchResult.total"
        background
        style="text-align: center"
      >
      </el-pagination>
      <!-- 抽屉 -->
      <el-drawer title="客户详细信息" :visible.sync="open" size="80%">
        <el-main>
          <el-descriptions
            class="margin-top"
            title="带边框列表"
            :column="3"
            size="medium"
            border
          >
            <template slot="extra" v-if="this.$store.state.currentUser.role === 'MANAGER'">
              <el-button type="danger" size="small" @click="handleDelete"
                >删除</el-button
              >
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                客户姓名
              </template>
              {{ this.currentCust.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                性别
              </template>
              {{ this.currentCust.gender }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                联系电话
              </template>
              {{ this.currentCust.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                信息来源
              </template>
              {{ this.currentCust.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                状态
              </template>
              {{ this.currentCust.state }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                报备日期
              </template>
              {{ this.currentCust.reportToDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                成交日期
              </template>
              {{ this.currentCust.dealDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                地址
              </template>
              {{ this.currentCust.address }}
            </el-descriptions-item>
          </el-descriptions>
          <el-tabs v-model="activeName">
            <el-tab-pane label="跟进" name="first">
              <FollowUp
                :current-cust="currentCust"
                :key="currentCust.custId"
              ></FollowUp>
            </el-tab-pane>
            <el-tab-pane label="编辑" name="second">
              <Edit
                :current-cust="currentCust"
                :key="currentCust.custId"
              ></Edit>
            </el-tab-pane>
            <el-tab-pane label="指派" name="third" v-if="this.$store.state.currentUser.role === 'MANAGER'">
              <Assign
                :current-cust="currentCust"
                :key="currentCust.custId"
              ></Assign>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import FollowUp from "../../components/FollowUp.vue";
import Edit from "../../components/Edit.vue";
import Assign from "../../components/Assign.vue";
import SelectState from "../../components/SelectState.vue";
import SelectUsers from "../../components/SelectUsers.vue";
export default {
  components: { FollowUp, Edit, Assign, SelectState, SelectUsers},
  data() {
    return {
      //用户列表
      users: [],
      //查询条件 改为null就好了
      searchCondition: {
        nameOrPhone: "",
        state: null,
        ownerUsername: this.$store.state.currentUser.username,
        page: 1,
        size: 10,
      },
      //查询结果
      searchResult: {
        list: [],
        total: 0,
      },
      //抽屉
      open: false,
      //选项卡
      activeName: "second",
      //选中的当前对象
      currentCust: {},
    };
  },
  methods: {
    search() {
      this.axios
        .post("/customer/search", this.searchCondition)
        .then((resp) => {
          this.searchResult = resp.data;
        })
        .catch(() => {
          this.$message.error("检索失败");
        });
    },
    handleSizeChange() {
      this.search();
    },
    handleCurrentChange() {
      this.search();
    },
    openDrawer(customer) {
      this.currentCust = customer;
      this.open = true;
    },
    handleDelete() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        type: "warning",
      }).then(() => {
        this.axios.delete(`/customer/delete/${this.currentCust.custId}`)
        .then(() => {
        
          this.$message.success("删除成功");
          this.open = false;
          this.search();
        })
        .catch(() => {
         this.$message.error("客户已存在跟进记录无法删除");
        })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          }); 
      });
    },
  },
};
</script>

<style scoped>
.search {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
</style>